<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>教务管理</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">
			<!-- <link rel="stylesheet" href="/scriptZIP/vue-select.min.css"> -->
		<link rel="stylesheet" href="/wechat/css/vue-select.css">

		<!-- 自定义样式 -->
		<style>
			body {
				background-color: #f3f3f3;
				/* overflow: hidden; */
				font-size: 10px;

			}

			#app {
				height: 100vh;
				background-image: url('../image/img/bgaddStu.png');
				background-size: contain;
				background-repeat: no-repeat;
			}

			.header {
				padding-top: 2rem;
			}

			.student-content {
				background-color: #fff;
				border-radius: 10px;
				margin: 0 1.6rem;
				margin-top: 2rem;
				padding: 1rem 0;
			}
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
			}
		</style>
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="/wechat/js/vue@3.js"></script>		
		<script src="/wechat/js/vant.min.js"></script>
		<script src="/wechat/js/vue-select.umd.min.js"></script>
			<!-- <script src="/scriptZIP/vue-select.min.js"></script> -->

<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/scriptZIP/axios.min.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue-select@3.20.4/dist/vue-select.js"></script> -->
		<!-- <script src="/js/common.js"></script> -->
	</head>

	<body style="font-size: 10px;">
		<div id="app">
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>
			<div class="header">
				<van-tabs v-model:active="active" type="card">
					<van-tab title="新增储备学员信息">
						<div class="student-content">
							<van-form @failed="onFailed" @submit="onSubmit">
								<van-cell-group inset>
									<van-field required v-model="fromOjb.name" name="学生姓名" label="学生姓名" placeholder="请输入学生姓名"
										:rules="[{ required: true, message: '请填写学生姓名' }]" />
								</van-cell-group>
						
						
								<van-cell-group inset>
									<van-field name="radio" label="您的性别">
										<template #input>
											<van-radio-group v-model="fromOjb.sex" direction="horizontal">
												<van-radio name="true">男</van-radio>
												<van-radio name="false">女</van-radio>
											</van-radio-group>
										</template>
									</van-field>
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="fromOjb.bindCode" name="手机号码" label="手机号码" placeholder="请输入手机号码"
										:rules="[{ required: true, message: '请填写手机号码' }]" />
						
								</van-cell-group>
								<van-cell-group inset>
									<van-field v-model="fromOjb.wechatId" name="微信号" label="微信号" placeholder="请输入微信号" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="fromOjb.schoolName" name="就读学校" label="就读学校" placeholder="请输入就读学校"
										:rules="[{ required: true, message: '请填写就读学校' }]" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="gradeName"  is-link readonly @click="showGradesPicker = true"  name="就读年级" label="就读年级" placeholder="请输入就读年级"
										:rules="[{ required: true, message: '请填写就读年级' }]" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="relationship" is-link readonly name="picker" label="选择关系" placeholder="请选择关系"
										@click="showPicker = true" :rules="[{ required: true, message: '请选择关系' }]" />
						
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="fromOjb.motherName" name="亲属姓名" label="亲属姓名" placeholder="请输入亲属姓名"
										:rules="[{ required: true, message: '请填写亲属姓名' }]" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="fromOjb.motherPhone" name="亲属手机号" label="亲属手机号" placeholder="请输入亲属手机号"
										:rules="[{ required: true, message: '请填写亲属手机号' }]" />
								</van-cell-group>
						
								<div style="margin: 16px;">
									<van-button round block type="primary"  native-type="onSubmit"  >
										提交
									</van-button>
								</div>
							</van-form>
						</div>
					</van-tab>
					<van-tab title="新增招生学员信息">
						
						<div class="student-content">
							<van-form @failed="onFailed" @submit="onSubmit2">
								<van-cell-group inset>
									<van-field required v-model="from2Ojb.name" name="学生姓名" label="学生姓名" placeholder="请输入学生姓名"
										:rules="[{ required: true, message: '请填写学生姓名' }]" />
								</van-cell-group>
						
						
								<van-cell-group inset>
									<van-field name="radio" label="您的性别">
										<template #input>
											<van-radio-group v-model="from2Ojb.sex" direction="horizontal">
												<van-radio name="true">男</van-radio>
												<van-radio name="false">女</van-radio>
											</van-radio-group>
										</template>
									</van-field>
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="from2Ojb.bindCode" name="手机号码" label="手机号码" placeholder="请输入手机号码"
										:rules="[{ required: true, message: '请填写手机号码' }]" />
						
								</van-cell-group>
								<van-cell-group inset>
									<van-field v-model="from2Ojb.wechatId" name="微信号" label="微信号" placeholder="请输入微信号" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="from2Ojb.schoolName" name="就读学校" label="就读学校" placeholder="请输入就读学校"
										:rules="[{ required: true, message: '请填写就读学校' }]" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="grade2Name"  is-link readonly @click="showGrades2Picker = true"  name="就读年级" label="就读年级" placeholder="请输入就读年级"
										  />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="relationship" is-link readonly name="picker" label="选择关系" placeholder="请选择关系"
										@click="showPicker = true" :rules="[{ required: true, message: '请选择关系' }]" />
						
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="from2Ojb.motherName" name="亲属姓名" label="亲属姓名" placeholder="请输入亲属姓名"
										:rules="[{ required: true, message: '请填写亲属姓名' }]" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="from2Ojb.motherPhone" name="亲属手机号" label="亲属手机号" placeholder="请输入亲属手机号"
										:rules="[{ required: true, message: '请填写亲属手机号' }]" />
								</van-cell-group>
								<van-cell-group inset>
									<van-field required v-model="sourceName" is-link readonly name="picker" label="学生数据来源" placeholder="请选择学生数据来源"
										@click="showDataSourcesPicker = true" :rules="[{ required: true, message: '请选择学生数据来源' }]" />
								</van-cell-group>
					
								<van-cell-group inset>
									<van-field required v-model="dataStatusName" is-link readonly name="picker" label="数据状态" placeholder="请选择数据状态"
										@click="showDataStatusedPicker = true" :rules="[{ required: true, message: '请选择数据状态' }]" />
								</van-cell-group>
<!-- 								<van-cell-group inset>
									<van-field required v-model="from2Ojb.promoter" name="推广人" label="推广人" placeholder="请输入推广人"
										:rules="[{ required: true, message: '请填写推广人' }]" />
								</van-cell-group>-->
								<van-cell-group style="margin: 10px 20px; font-size: 12px; border: none; background: none; box-shadow: none">
									 <van-cell required title="咨询课程" style="display: block; float: left; width: 40%; padding-bottom: 0;" > </van-cell>
										<v-select multiple placeholder="请选择课程" v-validate="'required'" :options="course" label="text" :reduce="item=>item.value"
								v-model="from2Ojb.casea"></v-select>
								</van-cell-group>
								<van-cell-group style="margin: 10px 20px; font-size: 12px; border: none; background: none; box-shadow: none">
									 <van-cell required title="推广人" style="display: block; float: left; width: 40%; padding-bottom: 0;" > </van-cell>
										<v-select  placeholder="请选择推广人" v-validate="'required'" :options="staffUser" label="text" :reduce="item=>item.value"
								v-model="from2Ojb.promoter"></v-select>
								</van-cell-group>
								<van-cell-group style="margin: 10px 20px; font-size: 12px; border: none; background: none; box-shadow: none">
									 <van-cell required title="跟进人" style="display: block; float: left; width: 40%; padding-bottom: 0;" > </van-cell>
										<v-select  placeholder="请选择跟进人" v-validate="'required'" :options="staffUser" label="text" :reduce="item=>item.value"
								v-model="from2Ojb.people"></v-select>
								</van-cell-group>
<!-- 								<van-cell-group inset> 
									<van-field required v-model="followPersonName" is-link readonly name="picker" label="推广人" placeholder="请选择推广人"
										@click="showFollowPersonPicker = true" :rules="[{ required: true, message: '请选择推广人' }]" />
								</van-cell-group> -->
<!-- 								<van-cell-group inset>
									<van-field required v-model="staffUserName" is-link readonly name="picker" label="跟进人" placeholder="请选择跟进人"
										@click="showStaffUserPicker = true" :rules="[{ required: true, message: '请选择跟进人' }]" />
								</van-cell-group> -->

<!-- 								<van-cell-group inset>
									<p>3333</p>
									<p>3333</p>
									
										
										<p>3333</p>
										<p>3333</p> -->
										<!-- <v-select multiple placeholder="请选择课程" label="name" :options="course" ></v-select> -->
<!-- 									 <div class="sel-picker">
									    <van-mul-select-picker
									      label="城市"
									      placeholder="请选择城市"
									      v-model="state.mulVal"
									      :columns="state.columns"
									      :options="{ label: 'name', value: 'id' }"
									      isSearch
									      checkAllShow
									      @confirm="confirm"
									      @change="change"
									    ></van-mul-select-picker>
									  </div> -->
<!-- 									<p>3232323</p>
									<p>3232323</p>
									<v-select multiple placeholder="请选择课程" label="name" :options="course" ></v-select>
									
									<p>3232323</p>
									<p>3232323</p> -->
									<!-- <div class="checkout_state" v-text="err('casea')"></div> -->
									
<!-- 									<van-field required v-model="courseName" is-link readonly name="picker" label="咨询课程" placeholder="请选择咨询课程"
										@click="showCoursePicker = true" :rules="[{ required: true, message: '请选择咨询课程' }]" /> -->
								<!-- </van-cell-group> -->

								<div style="margin: 25px 16px;">
									<van-button round block type="primary"  native-type="onSubmit"  >
										提交
									</van-button>
								</div>
							</van-form>
						</div>
					</van-tab>
				</van-tabs>
			</div>




		<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
			<van-picker
			  :columns="map2"
			  :model-value="pickerValue"
			  @confirm="onConfirm"
			  @cancel="showPicker = false"
			/>
		</van-popup>
		<van-popup v-model:show="showGradesPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="grades"
			    :model-value="pickerValue"
			    @confirm="onConfirmGrades"
			    @cancel="showGradesPicker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showGrades2Picker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="grades"
			    :model-value="pickerValue"
			    @confirm="onConfirm2Grades"
			    @cancel="showGrades2Picker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showDataSourcesPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="dataSources"
			    :model-value="pickerValue"
			    @confirm="onConfirmDataSources"
			    @cancel="showDataSourcesPicker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showDataStatusedPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="dataStatus"
			    :model-value="pickerValue"
			    @confirm="onConfirmDataStatus"
			    @cancel="showDataStatusedPicker = false"
			  />
		</van-popup>
		
		<van-popup v-model:show="showCoursePicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="course"
			    :model-value="pickerValue"
			    @confirm="onConfirmCourse"
			    @cancel="showCoursePicker = false"
			  />
		</van-popup>

		<van-popup v-model:show="showStaffUserPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="staffUser"
			    :model-value="pickerValue"
			    @confirm="onConfirmStaffUser"
			    @cancel="showStaffUserPicker = false"
			  />
		</van-popup>
		<van-popup v-model:show="showFollowPersonPicker" destroy-on-close position="bottom">
			  <van-picker
			    :columns="staffUser"
			    :model-value="pickerValue"
			    @confirm="onConfirmFollowPerson"
			    @cancel="showFollowPersonPicker = false"
			  />
		</van-popup>
		</div>

		<script>
			
			// import vanMulSelectPicker from "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js";
			// app.use(vant);
			// 初始化 Vue 实例
			const app = Vue.createApp({
				components: {
					vSelect: window["vue-select"]
				},
				data() {
					return {
						searchValue: '',
						loading: true,
						finished: false,
						list: [],
						studentStatus: '在读',
						schoolId: '',
						refreshing: false,
						pageNum: 1,
						pageSize: 10,
						  books: [
							{ title: "Old Man's War" },
							{ title: "The Lock Artist" },
							{ title: "HTML5" },
							{ title: "Right Ho Jeeves" },
							{ title: "The Code of the Wooster" },
							{ title: "Thank You Jeeves" }
						  ],
						OjbList: {},
						active: '新增储备学员信息',
						showPicker: false,
						showGradesPicker: false,
						showDataSourcesPicker: false,
						showCoursePicker: false,
						showStaffUserPicker: false,
						showDataStatusedPicker: false,
						showFollowPersonPicker: false,
						showGrades2Picker: false,
						grades: [],
						gradeName: '',
						relationship: '',
						pickerValue: [],
						sourceName: '',
						dataStatusName: '',
						courseName: '',
						staffUserName: '',
						followPersonName: '',
						agentId: '',
						grade2Name: '',
						fromOjb: {
							"avatar": null,
							"sex": 'true', //性别 男true  女false
							"wechatId": "",
							"agentId": "", //代理商id
							"cards": {}, //传空{}就行
							"status": "1", //这里默认1
							"fschoolId": "", //关联校区
							"schoolId": "", //分配校区
							"name": "", //姓名
							"schoolName": "", //就读学校
							"grade": 0, //年级
							"motherName": "", //母亲姓名 关系选择可参照后台
							"motherPhone": "", //联系电话
							"bindCode": "" ,//唯一手机号（绑定码）
							"relationship": []
						},
						from2Ojb: {
							"avatar": null, //图片文件名
							"sex": 'true',  //性别 男true  女false
							"wechatId": "",
							"agentId": "", //代理商id
							"cards": {}, //传空{}就行
							"status": "1", //这里默认1
							"casea": [], //咨询课程多选
							"name": "", //姓名
							"schoolName": "", //就读学校
							"grade": 0, //年级
							"fatherName": "", //父亲姓名
							"fatherPhone": "", //父亲电话
							"bindCode": "", //唯一手机号（绑定码）
							"source": 0, //学员来源
							"fschoolId": 0, //关联校区
							"dataStatusId": 0, //数据状态
							"dataIntentId": 0, //数据意向
							"promoter": '', //推广人
							"people": '', //跟进人
							"followReasonId": 0, //未报读理由
							"schoolId": 0 //分配校区
						},
						map2: [
							{ text: '父亲', value: 'father' },
							{ text: '母亲', value: 'mother' },
							{ text: '爷爷', value: 'grandfather' },
							{ text: '奶奶', value: 'grandmother' },
							{ text: '其他家人', value: 'other' },
						],
						dataSources: [],
						dataStatus: [],
						course: [],
						staffUser: [],
						state: {
						  mulVal: [],
						  columns: [
						    { name: "北京", id: "beijing" },
						    { name: "上海", id: "shanghai" },
						    { name: "深圳", id: "shenzhen" },
						    { name: "广州", id: "guangzhou" },
						    { name: "杭州", id: "hangzhou" },
						    { name: "重庆", id: "chongqing" },
						  ],
						}
					};
				},
				created: function() {
					this.schoolId = localStorage.getItem('schoolId');
					this.agentId = localStorage.getItem('agentId');
					this.fromOjb.fschoolId = this.schoolId
					this.fromOjb.schoolId = this.schoolId
					this.fromOjb.agentId = this.agentId
					this.from2Ojb.fschoolId = this.schoolId
					this.from2Ojb.schoolId = this.schoolId
					this.from2Ojb.agentId = this.agentId
					this.getGrade()
					this.getDataSources()
					this.getCourse()
					this.getStaffUser()
					// this.getList()

				},
				methods: {
					onFailed(errorInfo) {
						console.log('failed', errorInfo);
					},
					goBack() {
						history.back();
					},
					change() {},
					confirm(item) {
					  this.selectItem = item;
					},
					onSubmit(values) {
						axios.post('/t/student/add', this.fromOjb).then(function (res) {
							alert('添加成功');
						}.bind(this));
					},
					onSubmit2(values) {
						if (this.from2Ojb.casea.length == 0) {
							alert('请选择课程');
							return;
						}
						if (!this.from2Ojb.promoter) {
							alert('请选择推广人');
							return;
						}
						
						if (!this.from2Ojb.people) {
							alert('请选择跟进人');
							return;
						}
						axios.post('/t/student/addzs', this.from2Ojb).then(function (res) {
							alert('添加成功');
						}.bind(this));
					},
					filterclick(st) {
						this.studentStatus = st;
						this.list = []
						this.pageNum = 1
						// this.finished = false;
						this.getList()
					},
					onConfirmGrades({ selectedValues, selectedOptions }) {
						this.fromOjb.grade = selectedOptions[0]?.value;
						this.gradeName = selectedOptions[0]?.text;
						this.showGradesPicker = false
					},
					onConfirm({ selectedValues, selectedOptions }) {
						this.fromOjb.relationship[0] = selectedOptions[0];
						this.relationship = selectedOptions[0]?.text;
						this.showPicker = false
					},
					onToLoad() {
						this.loading = true;
						setTimeout(() => {
							// if (this.refreshing) {
							//   this.list = [];
							//   this.refreshing = false;
							// }
							// this.refreshing = false;
							// for (let i = 0; i < 10; i++) {
							//   this.list.push(this.list.length + 1);
							// }
							this.loading = false;
							this.finished = true;
							// this.pageNum += 1;
							// this.pageNum += 1;

							this.getList()

							// 		if (this.list.length >= 40) {
							// 		  finished.value = true;
							// 		}
						}, 1000);
					},
					onRefresh() {
						this.Loading = true;
						this.finished = false;
						this.pageNum = 1;
						this.list = [];
						this.onToLoad()

					},
					onSearch() {
						this.list = []
						this.refreshing = true
						this.pageNum = 1
						this.getList()
					},
					getGrade() {
						axios.get('/t/grade/all').then(function (res) {
							res.data.forEach(item => {
								this.grades.push({'text': item.name, 'value': parseInt(item.id)})
							});
						}.bind(this));
					},
					getDataSources() {
						axios.get('/t/category/'+ this.agentId).then(function (res) {
							res.data.dataSource.forEach((item, index) => {
								this.dataSources.push({'text': item, 'value': index})
							});
							res.data.dataStatus.forEach((item, index) => {
								this.dataStatus.push({'text': item, 'value': index})
							});
							
						}.bind(this));
					},
					getCourse() {
						axios.get('/t/course/all/'+ this.agentId).then(function (res) {
							// this.course = res.data
							res.data.forEach((item, index) => {
								this.course.push({'text': item.name, 'value': item.id})
							});
							
						}.bind(this));
					},
					getStaffUser() {
						axios.get('/t/staffUser/all/' + this.agentId).then(function (res) {
							res.data.forEach((item, index) => {
								this.staffUser.push({'text': item.name, 'value': item.id})
							});
						}.bind(this));
					},
					
					//代理商设置的课程
					onConfirmDataSources({ selectedValues, selectedOptions }) {
						this.from2Ojb.source = selectedOptions[0].value;
						this.sourceName = selectedOptions[0]?.text;
						this.showDataSourcesPicker = false
					},
					onConfirm2Grades({ selectedValues, selectedOptions }) {
						this.from2Ojb.grade = selectedOptions[0]?.value;
						this.grade2Name = selectedOptions[0]?.text;
						this.showGrades2Picker = false
					},
					onConfirmDataStatus({ selectedValues, selectedOptions }) {
						this.from2Ojb.dataStatusId = selectedOptions[0].value;
						this.dataStatusName = selectedOptions[0]?.text;
						this.showDataStatusedPicker = false
					},
					onConfirmCourse({ selectedValues, selectedOptions }) {
						this.from2Ojb.casea.push(selectedOptions[0].value);
						this.courseName = selectedOptions[0]?.text;
						this.showCoursePicker = false
					},
					onConfirmStaffUser({ selectedValues, selectedOptions }) {
						this.from2Ojb.people = selectedOptions[0].value;
						this.staffUserName = selectedOptions[0]?.text;
						this.showStaffUserPicker = false
					},
					onConfirmFollowPerson({ selectedValues, selectedOptions }) {
						this.from2Ojb.promoter = selectedOptions[0].value;
						this.followPersonName = selectedOptions[0]?.text;
						this.showFollowPersonPicker = false
					},
					getList() {
						axios.get('/t/getList', {
							params: {
								schoolId: this.schoolId,
								name: this.searchValue,
								studentStatus: this.studentStatus,
								pageNum: this.pageNum,
								pageSize: this.pageSize
							}
						}).then(function(res) {
							this.OjbList = res.data
							res.data.list.forEach(item => {
								this.list.push(item)
							});
							this.loading = false;
							this.finished = true;
							if (this.list.length >= this.OjbList.total) {
								this.finished = true; // 没有更多数据了
							} else {
								this.finished = false;
								this.pageNum++;
							}
							// this.finished = true; // 没有更多数据了
							// console.log('33344', this.list.length, res.data.total)
							// if (this.list.length >= res.data.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.pageNum += 1;
							//   }
						}.bind(this));
					},
					enterShop() {
						vant.Toast("进入店铺");
					},

				},
			});
			// app.component('v-select',  VueSelect);
			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>